#app {
  .main-container {
      min-height: 100%;
      transition: margin-left #{$siderBarDuration};
      margin-left: $siderBarWidth;
      position: relative;
  }
  .sidebar-container {
      transition: width #{$siderBarDuration};
      width: $siderBarWidth;
      background-color: $menuBg;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow: hidden;
      //重置element-plus 的css 
      .horizontal-collapse-transition {
          transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }
      .scrollbar-wrapper {
          overflow-x: hidden !important;
      }
      .el-scrollbar__bar.is-vertical {
          right: 0px;
      }
      .el-scrollbar {
          height: 100%;
      }
      &.has-logo {
          .el-scrollbar {
              height: calc(100% - 50px);
          }
      }
      .is-horizontal {
          display: none;
      }
      a {
          display: inline-block;
          width: 100%;
          overflow: hidden;
      }
      .svg-icon {
          margin-right: 16px;
      }
      .sub-el-icon {
          margin-right: 12px;
          margin-left: -2px;
      }
      .el-menu {
          border: none;
          height: 100%;
          width: 100% !important;
      }
      .is-active > .el-sub-menu__title {
          color: $subMenuActiveText !important;
      }
      & .nest-menu .el-sub-menu > .el-sub-menu__title, & .el-sub-menu .el-sub-menu-item {
          min-width: $siderBarWidth !important;
      }
  }
}
  .hiderSidebar {
      .sidebar-container {
          width: 54px !important;
      }
      .main-container {
          margin-left: 54px;
      }
      .submenu-title-noDropdown {
          padding: 0px !important;
          position: relative;
          .el-tooltip {
              padding: 0px !important;
              .svg-icon {
                  margin-left: 20px;
              }
              .sub-el-icon {
                  margin-left: 19px;
              }
          }
      }
      // .el-sub-menu__title
      .el-sub-menu {
          overflow: hidden;
          & > .el-sub-menu__title {
              padding: 0 !important;
              .svg-icon {
                  margin-left: 20px;
              }
              .sub-el-icon {
                  margin-left: 19px;
              }
              .el-sub-menu__icon-arrow {
                  display: none;
              }
          }
      }
      .el-menu--collapse {
          .el-sub-menu {
              & > .el-sub-menu__title {
                  & > span {
                      height: 0;
                      width: 0;
                      overflow: hidden;
                      visibility: hidden;
                      display: inline-block;
                  }
              }
          }
      }
      .el-menu--collapse .el-menu .el-sub-menu {
          min-width: $siderBarWidth !important;
      }
      .withoutAnimation {
          .main-container, .sidebar-container {
              transition: none;
          }
      }
  }
  .el-menu--vertical {
      & > .el-menu {
          .svg-icon {
              margin-right: 16px;
          }
          .sub-el-icon {
              margin-right: 12px;
              margin-left: -2px;
          }
      }
      > .el-menu--popup {
          max-height: 100vh;
          overflow-y: auto;
          &::-webkit-scrollbar-track-piece {
              background: #d3dce6;
          }
          &::-webkit-scrollbar {
              width: 6px;
          }
          &::-webkit-scrollbar-thumb {
              background: #99a9bf;
              border-radius: 20px;
          }
      }
  }